<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的文档 - 协作白板系统</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f7fa;
            margin: 0;
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 250px;
            background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
            color: white;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }

        .sidebar-header {
            padding: 25px 20px;
            font-size: 20px;
            font-weight: bold;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.2);
        }

        .sidebar-header i {
            margin-right: 10px;
            color: #3498db;
        }

        .menu-item {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }

        .menu-item:hover {
            background: rgba(255,255,255,0.1);
            color: white;
            border-left-color: #3498db;
        }

        .menu-item.active {
            background: rgba(52, 152, 219, 0.3);
            color: white;
            border-left-color: #3498db;
        }

        .menu-item i {
            width: 20px;
            text-align: center;
        }

        .sidebar-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 20px;
            border-top: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.2);
        }

        .main-content {
            margin-left: 250px;
            min-height: 100vh;
        }

        .top-bar {
            background: white;
            border-bottom: 1px solid #e9ecef;
            padding: 20px 30px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .content-area {
            padding: 30px;
        }

        .document-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e9ecef;
            transition: all 0.3s;
            height: 100%;
        }

        .document-card:hover {
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            transform: translateY(-4px);
            border-color: #3498db;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-header">
            <i class="fas fa-layer-group"></i>协作白板
        </div>
        
        <div style="padding: 10px 0;">
            <a href="/dashboard" class="menu-item">
                <i class="fas fa-home"></i>
                <span>工作台</span>
            </a>
            <a href="/documents" class="menu-item active">
                <i class="fas fa-folder"></i>
                <span>我的文档</span>
            </a>
            <a href="/teams" class="menu-item">
                <i class="fas fa-users"></i>
                <span>团队空间</span>
            </a>
            <a href="/templates" class="menu-item">
                <i class="fas fa-th-large"></i>
                <span>模板市场</span>
            </a>
            <a href="/profile" class="menu-item">
                <i class="fas fa-user-circle"></i>
                <span>个人中心</span>
            </a>
        </div>
        
        <div class="sidebar-footer">
            <div style="margin-bottom: 10px; color: rgba(255,255,255,0.7);" id="userName">
                <i class="fas fa-user"></i> 加载中...
            </div>
            <button class="btn btn-outline-light btn-sm w-100" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </button>
        </div>
    </div>

    <div class="main-content">
        <div class="top-bar">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="mb-0">我的文档</h4>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
                    <i class="fas fa-plus"></i> 新建文档
                </button>
            </div>
        </div>

        <div class="content-area">
            <div class="row" id="documentList">
                <div class="col-12 text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新建文档</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">文档标题</label>
                        <input type="text" class="form-control" id="docTitle" placeholder="请输入文档标题">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">文档类型</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="docType" id="typeBoard" value="BOARD">
                                <label class="form-check-label" for="typeBoard">
                                    <i class="fas fa-chalkboard text-primary"></i> 白板
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="docType" id="typeMindmap" value="MINDMAP">
                                <label class="form-check-label" for="typeMindmap">
                                    <i class="fas fa-project-diagram text-success"></i> 思维导图
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="docType" id="typeNote" value="NOTE" checked>
                                <label class="form-check-label" for="typeNote">
                                    <i class="fas fa-file-alt text-warning"></i> 笔记
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="createDocument()">创建</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        const API_BASE_URL = '/api';
        axios.defaults.baseURL = API_BASE_URL;
        axios.interceptors.request.use(config => {
            const token = localStorage.getItem('token');
            if (token) {
                config.headers.Authorization = `Bearer ${token}`;
            }
            return config;
        });

        axios.interceptors.response.use(
            response => response.data,
            error => {
                if (error.response?.status === 401) {
                    localStorage.removeItem('token');
                    window.location.href = '/login';
                }
                alert(error.response?.data?.message || '请求失败');
                return Promise.reject(error);
            }
        );

        function logout() {
            if (confirm('确定要退出登录吗？')) {
                localStorage.removeItem('token');
                localStorage.removeItem('user');
                window.location.href = '/login';
            }
        }

        $(document).ready(function() {
            const token = localStorage.getItem('token');
            if (!token || token === 'undefined' || token === 'null') {
                localStorage.clear();
                window.location.href = '/login';
                return;
            }
            
            try {
                const userStr = localStorage.getItem('user');
                if (userStr && userStr !== 'undefined' && userStr !== 'null') {
                    const user = JSON.parse(userStr);
                    if (user && user.nickname) {
                        $('#userName').html(`<i class="fas fa-user"></i> ${user.nickname}`);
                    }
                }
            } catch (e) {
                console.error('解析用户信息失败', e);
            }
            
            loadDocuments();
        });

        async function loadDocuments() {
            try {
                const res = await axios.get('/document/list');
                const documents = res.data.records || [];
                
                let html = '';
                if (documents.length > 0) {
                    documents.forEach(doc => {
                        const icon = getDocIcon(doc.docType);
                        const color = getDocColor(doc.docType);
                        html += `
                            <div class="col-md-6 col-lg-4 mb-4">
                                <div class="document-card">
                                    <div class="d-flex align-items-start mb-3">
                                        <i class="${icon} fa-3x me-3" style="color: ${color}"></i>
                                        <div class="flex-grow-1">
                                            <h5 class="mb-1">${doc.title}</h5>
                                            <small class="text-muted">${new Date(doc.updateTime).toLocaleString()}</small>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <a href="/document/${doc.id}" class="btn btn-sm btn-primary">
                                            <i class="fas fa-edit"></i> 编辑
                                        </a>
                                        <button class="btn btn-sm btn-outline-danger" onclick="deleteDocument(${doc.id})">
                                            <i class="fas fa-trash"></i> 删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                } else {
                    html = `
                        <div class="col-12 text-center py-5 text-muted">
                            <i class="fas fa-folder-open fa-5x mb-4" style="color: #ddd;"></i>
                            <h5>暂无文档</h5>
                            <p>点击右上角"新建文档"开始创作</p>
                        </div>
                    `;
                }
                
                $('#documentList').html(html);
            } catch (error) {
                console.error(error);
            }
        }

        async function createDocument() {
            const title = $('#docTitle').val().trim();
            const docType = $('input[name="docType"]:checked').val();

            if (!title) {
                alert('请输入文档标题');
                return;
            }

            try {
                const res = await axios.post('/document/create', {
                    title: title,
                    docType: docType
                });
                
                alert('创建成功');
                bootstrap.Modal.getInstance($('#createModal')[0]).hide();
                $('#docTitle').val('');
                
                window.location.href = '/document/' + res.data.id;
            } catch (error) {
                console.error(error);
            }
        }

        async function deleteDocument(id) {
            if (!confirm('确定要删除这个文档吗？文档将移至回收站。')) {
                return;
            }

            try {
                await axios.delete(`/document/${id}`);
                alert('删除成功');
                loadDocuments();
            } catch (error) {
                console.error(error);
            }
        }

        function getDocIcon(type) {
            const icons = {
                'BOARD': 'fas fa-chalkboard',
                'MINDMAP': 'fas fa-project-diagram',
                'NOTE': 'fas fa-file-alt'
            };
            return icons[type] || 'fas fa-file';
        }

        function getDocColor(type) {
            const colors = {
                'BOARD': '#007bff',
                'MINDMAP': '#28a745',
                'NOTE': '#ffc107'
            };
            return colors[type] || '#6c757d';
        }
    </script>
</body>
</html>
